/*
  发布文章
*/
$(function () {
  // 加载分类筛选条件的数据
  function loadCateList () {
    $.ajax({
      type: 'get',
      url: 'my/article/cates',
      success: function (res) {
        if (res.status === 0) {
          // 渲染分类下拉列表
          var tags = template('select-tpl', res)
          $('#category').html(tags)
          // 必须调用layui提供的如下方法才能展示出列表
          layui.form.render('select')
        }
      }
    })
  }
  loadCateList()

  // 初始化富文本效果
  initEditor()

  // 初始化文章封面裁切区
  // 处理文章封面的预览效果
  var $img = $('#image')
  var options = {
    // 纵横比
    aspectRatio: 400 / 280,
    // 预览的区域
    preview: '.img-preview'
  }
  $img.cropper(options)

  // 控制图片的选择
  $('#select-pic').click(function() {
    // 打开图片选择框
    $('#myfile').click()
  })
  // 获取选中的文件
  $('#myfile').change(function (e) {
    // 选中文件时，触发该事件，获取选中的文件
    var file = e.target.files[0]
    // 根据该文件生成预览URL地址
    var newImgURL = URL.createObjectURL(file)
    // 销毁原来的裁剪区，然后更新图片，最后重新生成裁剪区
    $img
     .cropper('destroy')      // 销毁旧的裁剪区域
     .attr('src', newImgURL)  // 重新设置图片路径
     .cropper(options)        // 重新初始化裁剪区域
  })

  // 实现发布文章的功能
  var state = ''
  $('.submit-btn').click(function (e) {
    if (e.target.id === 'btnPublish') {
      state = '已发布'
    } else if (e.target.id === 'btnSave') {
      state = '草稿'
    }
  })
  $('#add-form').submit(function (e) {
    e.preventDefault()
    // var fd = $(this).serialize()
    // 基于FormData进行表单提交（要上传文件）
    var fd = new FormData(this)
    fd.append('state', state)
    $img
      .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function(blob) { 
        // 将 Canvas 选区中的画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作（上传给服务器）
        fd.append('cover_img', blob)
        // 调用接口提交数据
        $.ajax({
          type: 'post',
          url: 'my/article/add',
          data: fd,
          // 防止参数转换为字符串
          processData: false,
          // 方式使用www格式请求参数
          contentType: false,
          success: function (res) {
            layer.msg(res.message)
          }
        })
      })
  })
})